<!-- 保养列表 -->
<template>
  <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
    <!-- <template #buts>
      <a-button type="primary" @click="equipmentUnkeep">
        <template #icon>
          <icon-plus></icon-plus>
        </template>
        <template #default>设备保养</template>
      </a-button>
    </template> -->
  </pageHeader>
  <div class="content">
    <div class="content-header">
      <div>
        <a-input-search
          search-button
          :style="{
            backgroundColor: '#fff',
            border: '1px solid #ccc',
          }"
          placeholder="请输入"
          v-model="currNumber"
          @search="search"
        >
          <template #prefix>
            <a-select
              :style="{
                marginRight: '10px',
                backgroundColor: '#fff',
                width: '150px',
              }"
              placeholder="请选择"
              v-model="currSelectName"
              @change="search"
            >
              <a-option value="number">保养单号</a-option>
              <a-option value="equipNumber">设备编码</a-option>
            </a-select>
          </template>
        </a-input-search>
      </div>
      <div
        :style="{
          marginLeft: '20px',
        }"
      >
        <!-- <span> 设备名称： </span> -->
        <a-input-search
          search-button
          :style="{ width: 'auto' }"
          placeholder="请输入"
          v-model="currEquipName"
          @search="search"
        >
          <template #prefix>设备名称：</template>
          <template #button-icon>
            <icon-search />
          </template>
        </a-input-search>
      </div>
      <div
        :style="{
          marginLeft: '10px',
        }"
      >
      </div>
      <a-button
        type="primary"
        :style="{
          marginLeft: '10px',
        }"
        @click="search"
      >
        <template #icon>
          <icon-search />
        </template>
        <template #default>搜索</template>
      </a-button>

      <a-button
        type="outline"
        :style="{
          marginLeft: '10px',
          borderColor: '#ccc',
          color: '#ccc',
        }"
        @click="reset"
      >
        <template #icon>
          <icon-refresh />
        </template>
        <template #default>重置</template>
      </a-button>
      <div
        :style="{
          marginLeft: '10px',
        }"
      >
      </div>
    </div>

    <div
      :style="{
        marginTop: '20px',
      }"
    >
      <TableTurn :args="args" :table-data="getData" ref="tableRef">
        <a-table-column :width="80" align="center">
          <template #title> 序号 </template>
          <template #cell="{ rowIndex }">
            {{ rowIndex + 1 }}
          </template>
        </a-table-column>

        <a-table-column
          :width="150"
          align="center"
          title="保养单号"
          data-index="number"
        >
        </a-table-column>

        <a-table-column
          :width="150"
          align="center"
          title="设备名称"
          data-index="equipName"
        >
        </a-table-column>
        <a-table-column
          :width="150"
          align="center"
          title="设备编码"
          data-index="equipNumber"
        >
        </a-table-column>
        <!-- <a-table-column :width="150" align="center" title="故障描述">
          <template #cell="{ record }">
            <a-button type="text" @click="goDetail(record, 2)">查看</a-button>
          </template>
        </a-table-column> -->

        <a-table-column :width="150" align="center" title="保养周期">
          <template #cell="{ record }">
            {{
              `${record.cycle.equipmentCycleVal}${record.cycle.equipmentCycleUnit}`
            }}
          </template>
        </a-table-column>
        <a-table-column :width="150" align="center" title="保养到期预警">
          <template #cell="{ record }">
            {{
              `${record.maintenanceWarning}${record.cycle.equipmentCycleUnit}`
            }}
          </template>
        </a-table-column>
        <a-table-column :width="200" align="center" title="保养开始时间">
          <template #cell="{ record }">
            {{
              record.maintenanceStartTime === 0
                ? '-'
                : `${dayjs(record.maintenanceStartTime).format(
                    'YYYY-MM-DD HH:mm:ss'
                  )}`
            }}
          </template>
        </a-table-column>

        <a-table-column :width="200" align="center" title="保养结束时间">
          <template #cell="{ record }">
            {{
              record.maintenanceEndTime === 0
                ? '-'
                : `${dayjs(record.maintenanceEndTime).format(
                    'YYYY-MM-DD HH:mm:ss'
                  )}`
            }}
          </template>
        </a-table-column>
        <a-table-column :width="150" align="center" title="是否需要维修">
          <template #cell="{ record }">
            {{
              record.isNeedRepair === 0
                ? '-'
                : record.isNeedRepair === 1
                ? '是'
                : '否'
            }}
          </template>
        </a-table-column>
        <a-table-column :width="150" align="center" title="是否需要更换备件">
          <template #cell="{ record }">
            {{
              record.isChangeParts === 0
                ? '-'
                : record.isChangeParts === 1
                ? '是'
                : '否'
            }}
          </template>
        </a-table-column>
        <a-table-column
          :width="150"
          align="center"
          title="保养状态"
          fixed="right"
        >
          <template #cell="{ record }">
            <div class="repair-state">
              <div
                class="cycle"
                :class="
                  record.maintainState === 1
                    ? 'waitJob-cycle'
                    : record.maintainState === 2
                    ? 'waitRepair-cycle'
                    : record.maintainState === 3
                    ? 'running-cycle'
                    : 'finish-cycle'
                "
              >
              </div>
              <div
                :class="
                  record.maintainState === 1
                    ? 'waitJob'
                    : record.maintainState === 2
                    ? 'waitRepair'
                    : record.maintainState === 3
                    ? 'running'
                    : 'finish'
                "
                >{{
                  record.maintainState === 1
                    ? '待派工'
                    : record.maintainState === 2
                    ? '待保养'
                    : record.maintainState === 3
                    ? '进行中'
                    : '已保养'
                }}</div
              >
            </div>
          </template>
        </a-table-column>

        <!-- 操作item -->
        <a-table-column align="center" :width="300" fixed="right" title="操作">
          <template #cell="{ record }">
            <a-button
              type="text"
              :style="{
                backgroundColor: '#31C27C',
                color: '#fff',
              }"
              v-if="record.maintainState === 2 || record.maintainState === 3"
              @click="goDetail(record, record.maintainState === 2 ? 13 : 8)"
            >
              {{ record.maintainState === 2 ? '开始保养' : '编辑' }}
            </a-button>
            <a-button type="text" @click="goDetail(record, 9)"
              >保养详情</a-button
            >
            <a-popconfirm
              @ok="deleteItem(record.id)"
              content="确定删除吗"
              type="error"
            >
              <a-button
                type="text"
                :style="{
                  color: 'red',
                }"
                >删除</a-button
              >
            </a-popconfirm>
          </template>
        </a-table-column>
      </TableTurn>
      <equipmentRepair
        :type="type"
        :form="form.list"
        v-model:visible="unkeepVisible"
        @equipmentEmit="equipmentEmit"
      ></equipmentRepair>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { useRouter } from 'vue-router';
  import { reactive, ref, onMounted } from 'vue';
  import dayjs from 'dayjs';
  import {
    GetEmployeeMaintenanceList,
    PutEmployeeMaintenanceList,
    DelMaintenanceEquipment,
  } from '@/api/equipment-management/equipment-maintain-employee';
  import equipmentRepair from '../../components/equipment-repair/index.vue';

  const router = useRouter();
  const title: string = '待保养列表';
  const breadCrumb: string[] = ['设备管理', '设备维护（员工）', '待保养列表'];

  // 表格配置
  const args = reactive({
    stripe: true,
    bordered: {
      headerCell: true,
    },
  });

  let tableRef = ref(); // 储存table的ref

  let type = ref(1); // 判断弹出框的type

  let currNumber = ref(''); // 第一个搜索框
  let currSelectName = ref(''); // 储存第一个搜索框的下拉框值

  let currEquipName = ref(''); // 设备名称搜索框

  const form = reactive({
    list: {},
  });

  // 获取表格数据
  const getData = async (pageData?: any) => {
    try {
      const data: any = {};
      if (currNumber.value.trim() !== '')
        data[currSelectName.value] = currNumber.value;
      if (currEquipName.value.trim() !== '')
        data.equipName = currEquipName.value;
      const res = await GetEmployeeMaintenanceList({
        ...pageData,
        maintainState: 2,
        ...data,
        userId: 1,
      });
      // 将保养周期的数据转成json格式
      for (let i of res.content) {
        i.cycle = JSON.parse(i.cycle);
      }
      return Promise.resolve(res);
    } catch (error: unknown) {
      console.log(error);
    }
  };

  // 搜索框事件
  const search = () => {
    tableRef.value.loadData();
  };

  let unkeepVisible = ref(false);

  // 前往派工或者详情页面
  const goDetail = (record: any, currType: number) => {
    type.value = currType;
    form.list = record;
    unkeepVisible.value = true;
  };

  // 弹出框的自定义事件
  const equipmentEmit = async (list: any, type: number) => {
    try {
      // 开始保养
      if (type === 13) {
        list.maintenanceStartTime = Number(list.maintenanceStartTime);
        list.cycle = JSON.stringify(list.cycle);
        await PutEmployeeMaintenanceList(list);
        tableRef.value.loadData();
      }
      // 编辑按钮
      else if (type === 8) {
        // 如果用户不填是否修改，就默认传2
        if (list.isChangeParts === 0) list.isChangeParts = 2;
        if (list.isNeedRepair === 0) list.isNeedRepair = 2;
        list.cycle = JSON.stringify(list.cycle);
        list.maintenanceEndTime = Number(list.maintenanceEndTime);
        await PutEmployeeMaintenanceList(list);
        tableRef.value.loadData();
      }
      unkeepVisible.value = false;
    } catch (error: unknown) {
      console.log(error);
    }
  };

  const deleteItem = async (id: number) => {
    try {
      await DelMaintenanceEquipment({ id });
      tableRef.value.loadData();
    } catch (error: unknown) {
      console.log(error);
    }
  };

  // 重置
  const reset = () => {
    currNumber.value = '';
    currSelectName.value = '';
    currEquipName.value = '';
    tableRef.value.loadData();
  };
</script>

<style scoped lang="less">
  .content {
    padding: 10px 40px;

    &-header {
      display: flex;
      width: 100%;
      height: 40px;
      margin-bottom: 10px;
      margin-top: 5px;
      :deep(.arco-btn-secondary) {
        color: #165dff;
      }
    }
    .repair-state {
      display: flex;
      justify-content: center;
      text-align: center;
      .cycle {
        position: relative;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        content: '';
        display: inline-block;
        top: 3px;
        right: 10px;
      }
    }

    // 待派工
    .waitJob {
      color: #ccc;
    }
    .waitJob-cycle {
      background-color: #ccc;
    }

    // 待保养
    .waitRepair {
      color: #ccc;
    }
    .waitRepair-cycle {
      background-color: #ccc;
    }
    // 进行中
    .running {
      color: #3d7eff;
    }
    .running-cycle {
      background-color: #3d7eff;
    }
    // 已保养
    .finish {
      color: #31c27c;
    }
    .finish-cycle {
      background-color: #31c27c;
    }
  }
</style>
